<div class="center-align from-container z-depth-5 white">
	<h3>Sign in</h3>
	<form>
		<div class="row">
			<div class="input-field">
				<i class="material-icons prefix">perm_identity</i>
				<input name="username" id="username" type="text">
				<label for="username">Username(email)</label>
			</div>
		</div>
		<div class="row">
			<div class="input-field">
				<i class="material-icons prefix">lock</i>
				<input name="password" id="password" type="password">
				<label for="password">Password</label>
			</div>
		</div>
		<div class="row">
			<div class="input-field">
				<a href="#!login" onclick="doLogin()" class="btn waves-effect waves-light green accent-4">
					<i class="material-icons left">send</i>Sign in
				</a>
			</div>
			<div class="right-aligin" style="margin-top:20px">
				<span class="grey-text">
					<a href="#!forgot">Forgot password</a>
					<span> Or </span>
					<a href="#!register">Sign up?</a>
				</span>
			</div>

		</div>
	</form>
</div>
<script>
	function doLogin() {
		//show loading
		$("#loading").fadeIn();
		//gen data
		var json = JSON.stringify({
			username: $("#username").val(),
			password: $("#password").val()
		});
		//do POST
		$.ajax({
			url: '/cgi-bin/login.lua',
			type: 'POST',
			data: json,
			async: true,
			cache: false,
			contentType: false,
			processData: false,
			success: function (res) {
				//hide loading
				$("#loading").fadeOut();
				//alert res
				alert(res);
				//window.location.href="/404.html";
			},
			error: function (res) {
				//hide loading
				$("#loading").fadeOut();
				alert(res);
			}
		});
	}

	$(document).ready(function () {
		$("#loading").fadeOut();
	});
</script>
